<script>
import loading_1 from "/src/components/loading/loading_1.vue"
import loading_2 from "/src/components/loading/loading_2.vue"
import loading_3 from "/src/components/loading/loading_3.vue"
import loading_4 from "/src/components/loading/loading_4.vue"

export default {
  components: {loading_1, loading_2, loading_3, loading_4},
  data() {
    return {
      isInitFinally: false,
      loadingNum: 1,
      maxLoadingNum: 4,
      // 需要登录的路由
      needLoginRoutes: ["/manage"],
    }
  },
  mounted() {
    this.loading();
  },
  methods: {
    async loading() {

      // 获取上一次加载的语言
      let lastLoadingLanguage = this.$kt.storage.get("lastLoadingLanguage");
      // 如果上一次加载的语言和当前语言一致
      if (lastLoadingLanguage === this.$i18n.getLanguageCode()) {
        // 获取上一次加载时间
        let lastLoadingTime = this.$kt.storage.get("lastLoadingTime");
        // 如果小于两小时，则不加载
        if (lastLoadingTime !== null && new Date().getTime() - lastLoadingTime < 2 * 60 * 60 * 1000) {
          this.isInitFinally = true;
          return;
        }
      }

      // 清除所有requestNumberBy开头的缓存
      let keys = Object.keys(localStorage);
      for (let i = 0; i < keys.length; i++) {
        if (keys[i].indexOf("requestNumberBy") === 0) {
          localStorage.removeItem(keys[i]);
        }
      }

      this.loadingNum = this.$kt.storage.get("loadingNum");
      if (this.loadingNum === null) {
        this.loadingNum = 1;
      } else {
        this.loadingNum = parseInt(this.loadingNum);
      }
      let loadingNum = this.loadingNum + 1;
      if (loadingNum > this.maxLoadingNum) {
        loadingNum = 1;
      }
      this.$kt.storage.set("loadingNum", loadingNum);

      await this.$i18n.loadLanguage("appFront", "en");
      await this.$i18n.loadLanguage("appFront");

      setTimeout(() => {
        this.isInitFinally = true;
      }, 1000);

      // 设置存储时间
      this.$kt.storage.set("lastLoadingTime", new Date().getTime());
      // 设置最后一次加载的语言
      this.$kt.storage.set("lastLoadingLanguage", this.$i18n.getLanguageCode());
    }
  }
}

</script>

<template>
  <div v-if="!isInitFinally"
       class="app-loading">
    <div class="app-loading-content">
      <div class="app-loading-icon-box">
        <loading_1 v-if="loadingNum===1"/>
        <loading_2 v-else-if="loadingNum===2"/>
        <loading_3 v-else-if="loadingNum===3"/>
        <loading_4 v-else-if="loadingNum===4"/>
      </div>
    </div>
  </div>
  <router-view v-else></router-view>
</template>

<style lang="scss" scoped>

.app-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .1);
  z-index: 999;

  .app-loading-icon-box {
    //animation: rotate 1s linear infinite;
  }

  .app-loading-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: #fff;
    text-align: center;
  }
}


</style>
